discover.vue
<template>
  <div class="discover-parent">
    <!-- 轮播图区域  -->
    <div class="top-section">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <van-image :src="item.src" fit="cover" class="banner-image" @click="goToBannerDetail(item)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    
    <!-- 宫格功能区  -->
    <div class="grid-section mt-4">
      <van-grid :border="false" :column-num="4" class="grid-container">
        <van-grid-item v-for="(item, index) in gridList" :key="index" class="grid-item" @click="openFeature(item)" >
          <div class="grid-content">
            <van-image :src="item.icon" fit="contain" class="grid-icon" />
            <p class="grid-text">{{ item.text }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    
    <!-- 发现好歌单区域  -->
    <div class="playlist-section mt-4">
      <div class="section-header">
         <div class="left" style="font-weight: bold;margin-bottom: 6px;">发现好歌单</div>
         <div class="right">
           <van-button size="mini"  plain round type="default" @click="viewMorePlaylists">查看更多</van-button>
         </div>
      </div>
      
      <!-- 歌单列表区域  -->
      <div class="playlist-list mt-2 overflow-x-auto pb-2 scrollbar-hide">
        <div v-for="(playlist, index) in playlistList" :key="index" class="playlist-card mr-3 inline-block" @click="playPlaylist(playlist)" >
          <van-image :src="playlist.cover" fit="cover" class="playlist-cover" />
          <p class="playlist-title text-xs mt-1 line-clamp-1">{{ playlist.title }}</p>
        </div>
      </div>
    </div> 
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; 
import { showToast } from 'vant';

// 轮播图数据
const bannerList = ref([
  { src: 'https://imgessl.kugou.com/stdmusic/20210110/20210110005503766891.jpg',link: '/banner/1'  },
  { src: 'https://c.53326.com/d/file/lan20210602/ln4y5wntpmt.jpg', link: '/banner/2'  },
  { src: 'https://c.53326.com/d/file/lan20210602/vh42wozsm1v.jpg', link: '/banner/3'  }
]);

// 宫格功能数据
const gridList = ref([
  { icon: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.ZqtVP9TIIcX5X18LDS5HFgHaHa?rs=1&pid=ImgDetMain&o=7&rm=3',text: '今日推荐'  },
  { icon: 'https://pic.qtfm.cn/2017/1213/20171213044559.jpeg',text: '私人FM'  },
  { icon: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.dfpCpCRE6rjxw-qgruJoZgHaHa?rs=1&pid=ImgDetMain&o=7&rm=3',text: '歌单'  },
  { icon: 'https://bpic.588ku.com/element_origin_min_pic/23/02/19/d73d950ef743465dae841a8346aea339.jpg',text: '排行榜'  }
]);

// 歌单数据
const playlistList = ref([
  {cover: 'https://pic.52112.com/180813/EPS-180813_280/u6s8LPDIAO_small.jpg',title: '华语流行精选'  },
  {cover: 'https://img95.699pic.com/photo/60010/9781.jpg_wh860.jpg',title: '经典摇滚'  },
  {cover: 'https://picsum.photos/200/200?random=3',title: '治愈民谣'  },
  {cover: 'https://picsum.photos/200/200?random=4',title: '电子舞曲'  }
]);

const router = useRouter();

// 轮播图点击事件
const goToBannerDetail = (item) => {
  router.push(item.link);
};

// 宫格点击事件
const openFeature = (item) => {
  console.log(`打开功能: ${item.text}`);
};

// 查看更多歌单
const viewMorePlaylists = () => {
  showToast('查看更多，为你推荐更多音乐');
};
</script>

<style lang="less" scoped>

.discover-parent {
  height: calc(100vh - 32px);
  background-color: #f4f4f4;
  padding: 10px;
  // 轮播图区域
  .top-section {
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    .banner-image {
      width: 100%;
      height: 180px;
    }
  }
  
  // 宫格区域
  .grid-section {
    .grid-container {
      background-color: white;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);     
      .grid-item {
        .grid-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 12px 0;     
          .grid-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 6px;
          }         
          .grid-text {
            font-size: 12px;
            color: #333;
          }
        }
      }
    }
  }
  
  // 歌单区域
  .playlist-section {
    background-color: white;
    padding: 0 10px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    
    .section-header {
      // border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 15px;
    }
    // 歌单列表样式 
    .playlist-list {
       display: grid;
       /* 每行两列，自动平分宽度 */
       grid-template-columns: repeat(2, 1fr); 
       /* 列与行之间的间距 */
       gap: 10px; 
       padding: 10px;
      }
    .playlist-card {
       width: 100%;
    }
    .playlist-cover {
       width: 100%;
       /* 保持图片比例，避免拉伸 */
       aspect-ratio: 1 / 1; 
       object-fit: cover;
       border-radius: 8px;
    }
  }
}
</style>